<template>
  <div class="borrow-wrap">
    <div class="borrow-container">
      <div class="borrow-top">
        <common-loading v-show="showLoading"></common-loading>
        <common-notice></common-notice>
        <div class="money-box">
          <div class="money">{{changeMoney}}</div>
          <div class="desc">借款金额(元)</div>
        </div>
        <common-progress @changeMoney="handleChnageMoney"></common-progress>
      </div>
      <div class="borrow-bottom"
           v-show="!showLoading">
        <div class="borrow-bottom-form">
          <ul class="form-list">
            <li class="form-item"
                border-bottom-1px
                @click="handleShowTime">
              <div class="title">借款时长</div>
              <div class="content">
                <p class="desc">{{timeValue}}天</p>
                <i class="iconfont icon-xiangyou"></i>
              </div>
            </li>
            <li class="form-item"
                border-bottom-1px
                @click="handleShowUse">
              <div class="title">借款用途</div>
              <div class="content">
                <p class="desc">{{useValue}}</p>
                <i class="iconfont icon-xiangyou"></i>
              </div>
            </li>
            <li class="form-item"
                border-bottom-1px>
              <div class="title">利率</div>
              <div class="content">
                <p class="desc rate">{{rate}}%</p>
              </div>
            </li>
            <li class="form-item"
                border-bottom-1px
                @click="handleCityShow">
              <div class="title">城市</div>
              <div class="content">
                <p class="desc">{{city}}</p>
                <i class="iconfont icon-xiangyou"></i>
              </div>
            </li>
          </ul>
          <ul class="icon-list">
            <li class="icon-item">
              <i class="iconfont icon-jisufangkuan"></i>
              <p class="icon-desc">极速匹配</p>
            </li>
            <li class="icon-item">
              <i class="iconfont icon-anquan"></i>
              <p class="icon-desc">资料安全</p>
            </li>
            <li class="icon-item">
              <i class="iconfont icon-gerenxinxi"></i>
              <p class="icon-desc">信息真实</p>
            </li>
          </ul>
        </div>
        <common-agreement @isShow="handleShow"
                          class="agreement-box"
                          @changeIsSelect="handleChangeSelect"
                          @getProtocol="handleGetProtocol"
                          :isSelect="isSelect"></common-agreement>
        <common-button @submit="handleSubmit"
                       :content="buttonTitle"></common-button>
      </div>
    </div>
    <van-popup v-model="show"
               @click-overlay="handleHide"
               class="popup">
      <div class="agreement-content">
        {{protocol}}
      </div>
    </van-popup>
    <van-popup v-model="showTime"
               position="bottom"
               :overlay="true"
               v-if="time.length">
      <van-picker :columns="time"
                  @confirm="handleTimeConfirm"
                  @cancel="handleHide"
                  show-toolbar />
    </van-popup>
    <van-popup v-model="use"
               position="bottom"
               :overlay="true"
               v-if="useType.length">
      <van-picker :columns="useType"
                  @confirm="handleUseConfirm"
                  @cancel="handleHide"
                  show-toolbar />
    </van-popup>
    <van-popup v-model="cityShow"
               position="bottom">
      <van-area :area-list="areaList"
                value="110101"
                @confirm="handleFinish"
                @cancel="handleHide" />
    </van-popup>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>
<script>
import CommonNotice from 'common/noticeBar/noticeBar'
import CommonProgress from 'common/progress/progressBar'
import CommonButton from 'common/button/button'
import CommonAgreement from 'common/agreement/agreement'
import CommonLoading from 'common/loading/loading'
import areaList from '@/assets/js/city'
export default {
  name: 'borrow',
  components: {
    CommonNotice,
    CommonProgress,
    CommonButton,
    CommonAgreement,
    CommonLoading
  },
  created () {
    this.areaList = areaList
    this.getInfo()
  },
  data () {
    return {
      money: 20000,
      changeMoney: 20000,
      show: false,
      buttonTitle: '下一步',
      time: [],
      useType: [],
      showTime: false,
      timeValue: '',
      use: false,
      useValue: '',
      cityShow: false,
      city: '',
      rate: '5',
      isSelect: true,
      province: '',
      cityName: '',
      area: '',
      timer: null,
      protocol: '',
      showLoading: true
    }
  },
  methods: {
    handleChnageMoney (per) {
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.changeMoney = Math.round(this.money * Number(per) / 100)
        this.timer = null
      }, 300)
    },
    handleShow (flag) {
      this.show = flag
    },
    handleSubmit () {
      const flag = this.check()
      if (flag) {
        this.borrow()
      }
    },
    borrow () {
      const duration = this.timeValue
      const purpose = this.useValue
      const inborrowRate = this.rate
      const province = this.province
      const city = this.cityName
      const area = this.area
      this.$api.borrow.money({ duration, purpose, inborrow_rate: inborrowRate, province, city, area })
        .then(this.borrowSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    borrowSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$router.push({
          path: '/borrow/attestation'
        })
      } else if (res.code === this.$api.CODE_ERROR) {
        this.$toast({
          duration: 1000,
          message: res.msg
        })
      }
    },
    check () {
      if (!this.isSelect) {
        this.$toast({
          duration: 1000,
          message: '请确认协议'
        })
        return false
      }
      if (this.city === '') {
        this.$toast({
          duration: 1000,
          message: '请选择城市'
        })
        return false
      }
      return true
    },
    handleHide () {
      this.show = false
      this.showTime = false
      this.use = false
      this.cityShow = false
    },
    // 贷款天数
    handleShowTime () {
      this.showTime = true
    },
    handleTimeConfirm (value, index) {
      console.log(value, index)
      this.timeValue = value
      this.showTime = false
    },
    // 用途
    handleShowUse () {
      this.use = true
    },
    handleUseConfirm (value, index) {
      this.useValue = value
      this.use = false
    },
    // 城市选择
    handleCityShow () {
      this.cityShow = true
    },
    handleFinish (e) {
      const city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
      this.city = city
      this.cityShow = false
      this.province = e[0].name
      this.cityName = e[1].name
      this.area = e[2].name
    },
    handleChangeSelect () {
      this.isSelect = !this.isSelect
    },
    getInfo () {
      this.$api.borrow.getInfo()
        .then(this.getInfoSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getInfoSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        this.showLoading = false
        const data = res.data
        this.time = data.info.duration
        this.money = parseInt(data.info.borrow)
        this.changeMoney = parseInt(data.info.borrow)
        this.useType = data.info.purpose
        this.rate = data.info.rate
        this.timeValue = data.info.duration[data.info.duration.length - 1]
        this.useValue = data.info.purpose[0]
      }
    },
    handleGetProtocol (content) {
      this.protocol = content
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.borrow-wrap >>> .van-popup.popup
  border-radius 20px
  min-width 80%
  max-height 80%
  padding()
  padding-top 20px
  padding-bottom 20px

.borrow-wrap >>> .van-picker__cancel, .borrow-wrap >>> .van-picker__confirm
  font-size $shop_name
  display flex
  align-items center

.borrow-wrap >>> .van-picker__toolbar
  height 80px

.borrow-wrap >>> .van-picker-column__item
  font-size $shop_name

.borrow-wrap
  width 100%
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc_gray
  z-index 10
  overflow hidden
  box-sizing border-box

.borrow-container
  width 100%
  position absolute
  top 0
  left 0
  z-index 15
  overflow-y scroll
  background-color $common_bgc_gray
  padding-bottom 40px
  max-height 100%
  box-sizing border-box

.borrow-top
  height 442px
  background linear-gradient(-90deg, rgba(47, 53, 66, 1), rgba(87, 96, 111, 1))
  box-shadow 0px 5px 12px 0px rgba(47, 53, 66, 0.16)
  padding-top 50px
  padding-left 20px
  padding-right 20px
  box-sizing border-box

  .money-box
    padding-top 50px
    box-sizing border-box

    .money
      width 100%
      text-align center
      line-height 90px
      font-size 64px
      font-weight bold
      color $common_bgc
      text-shadow 0px 2px 2px rgba(47, 53, 66, 0.24)

    .desc
      width 100%
      text-align center
      font-size $common_fz
      line-height 84px
      font-weight 400
      color $common_bgc

.borrow-bottom
  padding()
  padding-top 20px

  .borrow-bottom-form
    padding-left 32px
    padding-right 32px
    box-sizing border-box
    background-color $common_bgc
    border-radius 24px
    margin-bottom 40px

    .form-list
      width 100%

      .form-item
        width 100%
        height 110px
        display flex
        justify-content space-between
        align-items center

        .title, .content
          font-size $shop_name
          line-height 110px
          font-weight 400
          color #2F3542

        .content
          display flex

          .desc
            width 420px
            ellipsis()
            text-align right

          i
            font-size $common_fz
            color $icon_color
            margin-left 30px

        .rate.desc
          margin-right 60px

        .title
          text-align justify
          display inline-block
          width 140px
          height 100%

          &::after
            content ''
            display inline-block
            width 100%
            overflow hidden
            height 0

    .icon-list
      width 100%
      display flex
      justify-content space-between
      align-items center

      .icon-item
        height 114px
        display flex
        justify-content space-between
        align-items center

        i
          color $icon_color
          font-size $icon_fz
          margin-right 32px

        .icon-desc
          font-size $common_fz
          font-weight 500
          color $icon_color

.agreement-box
  margin-bottom 80px

.agreement-content
  width 100%
  height 100%
  overflow-y scroll
  background-color $common_bgc
  font-size $common_fz
  color $agreement_prefix
  line-height 40px
  overflow hidden
  border-radius 10px
</style>
